<template>
    <h2>父级组件：suspense组件的使用</h2>
    <Suspense>
        <!--异步组件-->
        <template #default>
            <async-component></async-component>
        </template>
        <!--准备的内容-->
        <template v-slot:fallback>
            <h2>Loading</h2>
        </template>
    </Suspense>
    <Suspense>
        <!--异步组件-->
        <template #default>
            <async-address></async-address>
        </template>
        <!--准备的内容-->
        <template v-slot:fallback>
            <h2>Loading</h2>
        </template>
    </Suspense>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue'
// 引入组件：静态引入和动态
// vue2 动态引入(在vue3中不行)
// const AsyncComponent = () => import('./AsyncComponent.vue')
// vue3 动态引入
//  const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))
// 静态引入
import AsyncComponent from './AsyncComponent.vue'
import AsyncAddress from './AsyncAddress.vue'
export default defineComponent({
    name: 'App',
    components: {
        AsyncComponent,
        AsyncAddress
    },
    setup() {
        return {}
    },
})
</script>
<style>
</style>